<template>
  <div class="rowStudent">
    <div class="choiceButton">
      <b>选择学校:</b>
        <select @change="changeProduct($event)" v-model="selected">
          <option>请选择学校</option>
          <option v-for="item in schoolList" v-bind:value="item.value">{{item.value}}</option>
        </select>
      <b>抽取总数:</b><input type="text" name="allRoll" class="input" v-model="allSize">
      <b>单次抽取数:</b><input type="text" name="singleRoll" class="input" v-model="size">
    </div>
    <DataGrid style="height:520px;margin-top:10px"
              :data="selectedStudentsIndex"
              :selectionMode="selection"
              @selectionChange="selection=null">
      <GridColumn class="studentNumb" field="studentNumb" title="序号"></GridColumn>
      <GridColumn class="stuName" field="studentName" title="姓名"></GridColumn>
      <GridColumn class="stuSex" field="studentSex" title="性别"></GridColumn>
      <GridColumn class="stuIDNumb" field="studentIDNumb" title="身份证号"></GridColumn>
      <GridColumn class="choiceSchool" field="choiceSchool" title="选择学校"></GridColumn>
<!--      <GridColumn field="status" title="Status" align="center"></GridColumn>-->
    </DataGrid>
<!--    <p v-if="selection">You selected: {{selectionInfo}}</p>-->
<!--    <div class="choiceButton">-->
<!--      <form>-->
<!--        <b>选择学校:</b>-->
<!--        <select @change="changeProduct($event)" v-model="selected">-->
<!--          <option>请选择学校</option>-->
<!--          <option v-for="item in schoolList" v-bind:value="item">{{item}}</option>-->
<!--        </select>-->
<!--        <b>抽取总数:</b><input type="text" name="allRoll" class="input" v-model="allSize">-->
<!--        <b>单词抽取数:</b><input type="text" name="singleRoll" class="input" v-model="size">-->
<!--      </form>-->
<!--    </div>-->
<!--    <div class="rolledStuList">-->
<!--      <table border="1"  cellspacing="0" cellpadding="0">-->
<!--        <thead>-->
<!--        <tr>-->
<!--          <td class="studentNumb">序号</td>-->
<!--          <td class="stuName">姓名</td>-->
<!--          <td class="stuSex">性别</td>-->
<!--          <td class="stuIDNumb">身份证号</td>-->
<!--          <td class="choiceSchool">报选学校</td>-->
<!--        </tr>-->
<!--        </thead>-->
<!--        <tbody>-->
<!--          <tr v-for="stu in selectedStudentsIndex" >-->
<!--            <td class="studentNumb">{{stu.studentNumb}}</td>-->
<!--            <td class="stuName">{{stu.studentName}}</td>-->
<!--            <td class="stuSex">{{stu.studentSex}}</td>-->
<!--            <td class="stuIDNumb">{{stu.studentIDNumb}}</td>-->
<!--            <td class="choiceSchool">{{stu.choiceSchool}}</td>-->
<!--          </tr>-->
<!--        </tbody>-->
<!--      </table>-->
<!--    </div>-->
    <div class="rollButton">
      <button class="ROLL" v-on:click="selectStudents">抽取</button>
      <b>已抽取数为:</b><input class="input" readonly="readonly" v-model="countSize"/>
    </div>
  </div>
</template>

<script>
  import axios from "axios";

  export default {
    name:'viewSchoolList',
    data(){
      return{
        selectionMode:null,
        selected:"请选择学校",
        selection: null,
        schoolList:[],
        productActive:"1",
        stuList: [],
        studentIndexs:[],
        size:[],
        selectedStudentsIndex:[],
        allSize:[],
        countSize:0,
      }
    },
    mounted(){
      this.axios({
        headers:{'Content-Type': 'application/json;charset=UTF-8'},
        method:"post",
        url:'http://localhost:9090/viewSchoolList',
      }).then(res=>{
        console.log(res.data);
        this.schoolList=res.data;
      })
    }
    ,methods:{
      //从后台获取对应学校的学生
      viewStuList(schoolName){
        this.axios({
          headers:{'Content-Type': 'application/json;charset=UTF-8'},
          method:"post",
          url:'http://localhost:9090/outputStudentData',
          data:JSON.stringify({schoolName:schoolName})
        }).then(res=>{
          console.log(res.data);
          this.stuList=res.data;
        })
      },
      //从后台获取该学校已抽取的学生数
      viewCountNumb(schoolName){
        console.log(schoolName)
        this.axios({
          headers:{'Content-Type': 'application/json;charset=UTF-8'},
          method:"post",
          url:'http://localhost:9090/viewCountNumb',
          data:schoolName,
        }).then(res=>{
          console.log(res.data);
          this.countSize=res.data;
        })
      },
      //改变选择的学校时获取对应学校的学生和该学校已抽取的学生
      changeProduct($event){
        // this.productActive = event.target.value;
        this.viewStuList(event.target.value);
        //this.countSize=0;
        this.viewCountNumb(this.selected);
        // console.log(this.viewStuList(event.target.value));
      },
      //抽取学生
      selectStudents() {
        if(JSON.stringify(this.allSize)=='[]'||JSON.stringify(this.size)=='[]'){
          // console.log("未输入抽取信息");
          this.intervalId = null;
          return;
        }
        else if(this.stuList.length==0){
          // console.log("已无学生");
          this.intervalId = null;
          return;
        }
        else if(parseInt(this.countSize)>=parseInt(this.allSize)){
          // console.log("已抽完")
          this.intervalId = null;
          return;
        }
        // 如果未开启定时器
        else if (!this.intervalId) {
          // console.log("抽取");
          if(parseInt(this.countSize)+parseInt(this.size)<parseInt(this.allSize)){
            this.intervalId = setInterval(() => {
              // 获取到随机选中的学员索引数组
              this.selectedStudentsIndex = this.stuList.sort(() => 0.5 - Math.random()).slice(0, this.size)
            }, 20);
          }else {
            this.intervalId = setInterval(() => {
              // 获取到随机选中的学员索引数组
              console.log(this.countSize);
              this.selectedStudentsIndex = this.stuList.sort(() => 0.5 - Math.random()).slice(0, parseInt(this.allSize)-parseInt(this.countSize))
            }, 20);
          }
        }
        // 开启了定时器
        else {
          // console.log("完成抽取");
          clearInterval(this.intervalId);
          this.intervalId = null;
          // this.selectedStudentsIndex.filter(i => !this.stuList.includes(i)).concat(this.stuList.filter((i) => !this.selectedStudentsIndex.includes(i)));
          // console.log(this.selectedStudentsIndex);//打印抽到的学生
          // console.log(this.stuList);//打印当前该学校还未抽取的学生数
          let set=this.selectedStudentsIndex.map(item=>item.studentNumb);
          // console.log("↓抽到的学生↓")
          // console.log(this.selectedStudentsIndex);//打印
          let resArr=this.stuList.filter(item=>!set.includes(item.studentNumb));
          // console.log("↓该学校剩余学生↓")
          // console.log(resArr);//打印删除后该学校剩余学生
          this.stuList=resArr;
          // console.log(this.selected);
          this.deleteSelectedStudents();
        }
      },
      //向后台发送已抽到的学生信息并在后台对应学校的列表中移除该学生、并将抽到的学生加入后台对应的学生集合中，返回值为对应学校已抽取的学生数
      deleteSelectedStudents(){
        this.axios({
          headers:{'Content-Type': 'application/json;charset=UTF-8'},
          method:"post",
          url:'http://localhost:9090/deleteSelectedStudent',
          data:JSON.stringify(this.selectedStudentsIndex,this.selected)
        }).then(res=>{
          console.log(res.data);//打印该学校已抽取学生数
          this.countSize=res.data;
        })
      }
    }
  }
</script>

<style>
  .studentNumb{
    width: 60px;
  }
  .input{
    width: 40px;
  }
  .rowStudent{
    margin: auto;
    height: 100%;
    width: 100%;
    background-color: #ece7e7;
  }
  select{
    width: 160px;
  }
  table{
    margin: auto;
    background-color: white;
    hight:160px;
  }
  .stuName{
    width: 80px;
    height: 40px;
  }
  .stuSex{
    width: 60px;
  }
  .stuIDNumb{
    width: 200px;
  }
  .choiceSchool{
    width: 100px;
  }
  .ROLL{
    font-family: 'Times New Roman', serif;
    background-color: #e4edee;
    border: 2px solid #447fbc;
    border-radius: 8px;
    margin-top: 5px;
    height: 25px;
    width: 70px;
  }
  /* 悬停按钮 */
  .ROLL {
    -webkit-transition-duration: 0.4s;
    transition-duration: 0.4s;
  }

  .choiceButton{
    padding-top: 5px;
  }
  .ROLL:hover {
    background-color: #7cbbd9;
    color: white;
  }
</style>
